<template>
  <div class="judge">
    <div class="judge-title"><span>审核页面</span></div>
    <div class="filter-container">
      <el-input
        v-model="listQuery.title"
        placeholder="标题"
        style="width: 200px"
      />
      <el-select
        v-model="listQuery.importance"
        placeholder="等级"
        clearable
        style="width: 90px"
      >
        <el-option
          v-for="item in importanceOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select
        v-model="listQuery.type"
        placeholder="类型"
        clearable
        style="width: 130px"
      >
        <el-option
          v-for="(item, index) in typeOptions"
          :key="index"
          :label="item"
          :value="1"
        />
      </el-select>
      <el-select
        v-model="listQuery.sort"
        style="width: 140px"
        class="filter-item"
      >
        <!-- 排序方式 -->
        <el-option
          v-for="item in sortOptions"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
      <el-button
        style="margin-left: 10px"
        type="primary"
        color="rgb(219,113,119)"
      >
        <el-icon><Search /></el-icon>搜索
      </el-button>
      <el-button
        style="margin-left: 10px"
        type="primary"
        color="rgb(221, 80, 88)"
      >
        <el-icon><Edit /></el-icon> 添加
      </el-button>
      <el-button
        v-waves
        :loading="downloadLoading"
        type="primary"
        color="rgb(233,157, 66)"
      >
        <el-icon><Bottom /></el-icon> 导出
      </el-button>
    </div>
    <!-- 按钮组结束 -->

    <el-table
      v-loading="listLoading"
      :data="pageResult.data.list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="name" label="受审名" />
      <el-table-column prop="part" label="所属板块" />
      <el-table-column prop="subPart" label="所属细分" />
      <el-table-column prop="itemName" label="项目名称" />
      <el-table-column prop="itemScore" label="分值" />
      <el-table-column>
        <template #header> 操作 </template>
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            color="rgb(21,149,106)"
            @click="handleAccept(scope.$index, scope.row)"
          >
            查看材料
          </el-button>
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            修改
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格定义结束 -->
    <div class="pagination">
      <el-pagination
        :current-page="listQuery.pageNo"
        :page-size="listQuery.pageSize"
        :page-sizes="paginationSizeList"
        :background="true"
        :total="pageResult.data.total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const paginationSizeList = ref([5, 10, 20]);
var listLoading = false;
const typeOptions = ref(["类型1", "类型2"]); // 从后端获取

// 请求数据，用于service发送请求
const listQuery = ref({
  pageNo: 1,
  pageSize: 5,
  title: "",
  judgeStatus: 20102, // 审核通过
});

var pageResult = {
  data: {
    total:1,
    list: [{ id: 1, name: "xiaowang", address: "ass" }],
  },
};

var importanceOptions = [1, 2, 3];

// 排序规则
var sortOptions = [];

var downloadLoading = false;

const handleAccept = (index, row) => {
  console.log(index, "row", row);
};

const handleEdit = (index, row) => {
  console.log(index, "row", row);
};

const handleDelete = (index, row) => {
  console.log(index, "row", row);
};
</script>

<style lang="scss" scoped>
.judge {
  .judge-title {
    font-size: 30px;
  }
  .filter-container {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .el-table {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

.pagination {
  margin-top: 5px;
  margin-bottom: 5px;

  display: flex;
  justify-content: center;
}
</style>
